<template>
    <div>
        <MyHeader>星座物语</MyHeader>
        <NavBar />
        <router-view v-slot="{ Component }">
            <keep-alive>
                <component :is="Component" />
            </keep-alive>
        </router-view>
        <Tab></Tab>
    </div>
</template>

<script>
import MyHeader from 'comps/Header/index.vue';
import Tab from 'comps/Tab/index.vue';
import NavBar from 'comps/NavBar/index.vue';
// import ErrorTip from 'comps/ErrorTip/index.vue';

import { watch, computed, onBeforeMount } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';

export default {
    name: 'App',
    components: {
        MyHeader,
        Tab,
        NavBar
    },
    setup () {
        const store = useStore()
        const state = store.state
        const router = useRouter()

        onBeforeMount(() => {
            if(!navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){
                // alert('移动端')
                router.replace({ path: '/error' });
            }
        });

        // router.push('/')
        // store.commit('setFiled', 'today')

        watch(() => {
            return router.currentRoute.value.name
        },(value) => {
            store.commit('setFiled', value)
        })
        return {
            errorCode: computed(() => store.state.errorCode)
        }
    }
}
</script>

<style lang="scss">
    body {
        margin: 0;
        background-color: #F9FBFC;
    }
    .container{
        margin-bottom: .5rem;
    }
</style>
